<template>
  <a-button class="svg-button" :type="type" :size="size" :disabled="disabled" @click="handleClick">
    <!-- 动态渲染 SVG -->
    <span v-if="icon" class="svg-icon-wrapper" v-html="getSvgHtml(icon)"></span>
    <slot></slot>
  </a-button>
</template>

<script>
export default {
  name: 'HfButton',
  props: {
    type: {
      type: String,
      default: 'default' // primary/dashed/danger 等
    },
    size: {
      type: String,
      default: 'default' // large/small
    },
    disabled: Boolean,
    icon: String // 接收 SVG path 字符串
  },
  data() {
    return {
      // 返工
      rework: `<svg t="1745745830346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4938" width="1em" height="1em"><path d="M279.272727 46.545455v88.436363h465.454546V46.545455h186.181818v930.90909H93.090909V46.545455h186.181818z m139.636364 325.818181v93.561019h172.823273c56.366545 0 102.074182 45.702982 102.074181 102.074181v9.960728c0 56.375855-45.707636 102.074182-102.074181 102.074181H325.818182V772.654545h285.630836c105.397527 0 190.836364-85.438836 190.836364-190.836363v-18.618182c0-105.397527-85.438836-190.836364-190.836364-190.836364H418.909091zM235.054545 418.909091l186.181819 141.963636v-283.927272L235.054545 418.909091z" fill="#ffffff" p-id="4939"></path><path d="M325.818182 0h372.363636v93.090909H325.818182z" fill="#ffffff" p-id="4940"></path></svg>`,
      picking: `<svg t="1745746413985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7919" width="1.4em" height="1.4em"><path d="M784.50688 336.44544L551.77216 102.4H241.41824c-20.56192 0-40.30464 8.23296-54.84544 22.85568A78.299136 78.299136 0 0 0 163.84 180.4288v624.14848c0 20.6848 8.192 40.5504 22.7328 55.17312 14.5408 14.62272 34.28352 22.85568 54.84544 22.85568h155.15648v-74.1376l387.93216-390.10304v-81.92z m-354.83648 346.9312H219.09504v-81.5104h210.57536v81.5104z m70.16448-163.84H219.09504v-81.5104h280.7808v81.5104z m13.14816-144.05632V160.93184l213.36064 214.54848h-213.36064zM854.34368 590.0288l-50.42176-50.70848a20.082688 20.082688 0 0 0-15.52384-7.82336c-5.81632 0.98304-11.22304 3.6864-15.52384 7.82336l-38.78912 38.99392 81.46944 81.92 38.78912-38.99392a23.87968 23.87968 0 0 0 0-31.21152zM474.19392 839.68v81.92h81.42848l236.66688-237.9776-81.46944-81.92z" fill="#ffffff" p-id="7920"></path></svg>`
    }
  },
  methods: {
    // 将 SVG 字符串转换为可渲染的 HTML
    getSvgHtml(svgPath) {
      return this[svgPath]
    },
    handleClick(e) {
      this.$emit('click', e)
    }
  }
}
</script>

<style scoped>
.svg-button {
  display: inline-flex;
  align-items: center;
}

.svg-icon-wrapper {
  display: inline-flex;
  line-height: 0; /* 解决 SVG 对齐问题 */
  margin-right: 6px; /* 图标与文字间距 */
}
</style>
